<template>
  <div class="help-center-page">
    <!-- 页面标题 -->
    <div class="page-header">
      <h1 class="gradient-title">
        <el-icon><QuestionFilled /></el-icon>
        帮助中心
      </h1>
      <p class="page-subtitle">快速找到您需要的答案</p>
    </div>

    <!-- 快速搜索 -->
    <div class="search-section">
      <el-input
          v-model="searchKeyword"
          placeholder="输入关键词搜索问题..."
          size="large"
      >
        <template #append>
          <el-button :icon="Search" type="primary" />
        </template>
      </el-input>
    </div>

    <!-- 内容布局 -->
    <div class="content-layout">
      <!-- 左侧导航 -->
      <div class="nav-sidebar">
        <div
            v-for="(category, index) in categories"
            :key="index"
            class="nav-item"
            :class="{active: activeCategory === index}"
            @click="activeCategory = index"
        >
          <el-icon><component :is="category.icon" /></el-icon>
          <span>{{ category.title }}</span>
        </div>
      </div>

      <!-- 右侧内容 -->
      <div class="content-main">
        <!-- 常见问题 -->
        <div class="faq-section">
          <h3 class="section-title">
            {{ categories[activeCategory].title }} 常见问题
          </h3>

          <el-collapse accordion>
            <el-collapse-item
                v-for="(item, index) in filteredQuestions"
                :key="index"
                :name="index"
            >
              <template #title>
                <div class="question-title">
                  <el-icon><Pointer /></el-icon>
                  {{ item.question }}
                </div>
              </template>
              <div class="answer-content" v-html="item.answer"></div>
            </el-collapse-item>
          </el-collapse>
        </div>

        <!-- 联系支持 -->
        <div class="support-section">
          <el-card shadow="never">
            <div class="support-card">
              <el-icon><Service /></el-icon>
              <div class="support-info">
                <h4>需要更多帮助？</h4>
                <p>我们的支持团队随时为您服务</p>
                <div class="contact-ways">
                  <el-button type="primary" round>
                    <el-icon style="margin-right: 10px" size="small"><ChatDotRound /></el-icon>
                     在线咨询
                  </el-button>
                  <el-divider direction="vertical" />
                  <el-button type="success" round>
                    <el-icon style="margin-right: 10px" size="small"><Message /></el-icon>
                     留言反馈
                  </el-button>
                </div>
              </div>
            </div>
          </el-card>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import {
  QuestionFilled,
  Search,
  Pointer,
  Service,
  ChatDotRound,
  Message,
  User,
  MagicStick,
  CreditCard,
  Document
} from '@element-plus/icons-vue'

const searchKeyword = ref('')
const activeCategory = ref(0)

const categories = ref([
  {
    title: '使用指南',
    icon: User,
    questions: [
      {
        question: '如何开始第一次简历优化？',
        answer: '1. 点击"新建优化"按钮上传简历<br>2. 选择目标岗位类型<br>3. 查看AI分析报告并确认优化方案'
      },
      {
        question: '可以上传哪些格式的简历？',
        answer: '支持PDF、Word文档和纯文本格式，建议使用PDF格式保证最佳显示效果'
      }
    ]
  },
  {
    title: '优化相关',
    icon: MagicStick,
    questions: [
      {
        question: 'AI优化包含哪些具体改进？',
        answer: '包括：关键词优化、结构重组、成就量化、ATS兼容性检测等8大核心模块'
      },
      {
        question: '优化后的简历可以导出吗？',
        answer: '支持导出为PDF/Word格式，会员可额外获得LaTeX和Markdown格式'
      }
    ]
  },
  {
    title: '账户与支付',
    icon: CreditCard,
    questions: [
      {
        question: '如何升级会员套餐？',
        answer: '进入"账户设置"-"套餐管理"，选择需要的套餐完成支付即可立即生效'
      },
      {
        question: '购买后可以申请退款吗？',
        answer: '虚拟商品支持7天内无理由退款，已使用的优化次数将按单次价格扣除'
      }
    ]
  },
  {
    title: '其他问题',
    icon: Document,
    questions: [
      {
        question: '如何保证我的隐私安全？',
        answer: '我们采用银行级加密传输，所有数据仅用于优化服务，详细条款见<隐私政策>'
      }
    ]
  }
])

const filteredQuestions = computed(() => {
  return categories.value[activeCategory.value].questions.filter(item =>
      item.question.toLowerCase().includes(searchKeyword.value.toLowerCase()) ||
      item.answer.toLowerCase().includes(searchKeyword.value.toLowerCase())
  )
})
</script>

<style lang="scss" scoped>
.help-center-page {
  width: 100%;
  box-sizing: border-box;
  padding: 2rem 2rem 2rem 2rem;
  .search-section {
    width: 100%;
    margin: 40px auto;
  }

  .content-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 40px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
  }

  .nav-sidebar {
    box-sizing: border-box;
    width: 100%;
    .nav-item {
      padding: 16px 15px 16px 10px;
      margin: 8px 0;
      border-radius: 8px;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 12px;
      transition: all 0.3s;
      color: #606266;

      &:hover {
        background: #f8f9fa;
        color: var(--primary-color);
      }

      &.active {
        background: var(--primary-color);
        background-color: #efefef;
      }

      .el-icon {
        font-size: 1.2rem;
      }
    }
  }

  .faq-section {
    .section-title {
      color: var(--primary-color);
      margin-bottom: 24px;
    }

    :deep(.el-collapse-item__header) {
      font-size: 1.1rem;
      padding: 16px 0;
    }

    .question-title {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 0px 10px;
    }

    .answer-content {
      padding: 16px;
      background: #f8f9fa;
      border-radius: 8px;
      line-height: 1.8;
      color: #606266;
    }
  }

  .support-section {
    margin-top: 40px;
    margin-bottom: 30px;
    .support-card {
      display: flex;
      align-items: center;
      gap: 24px;
      padding: 24px;

      .el-icon {
        font-size: 3rem;
        color: var(--primary-color);
      }

      .support-info {
        h4 {
          margin: 0 0 8px;
          font-size: 1.3rem;
        }

        p {
          color: #909399;
          margin-bottom: 16px;
        }

        .contact-ways {
          display: flex;
          align-items: center;
          gap: 16px;
          justify-content: center;
        }
      }
    }
  }
}
</style>